let img = document.querySelector('.preview_img img');
let title = document.querySelector('.itemInfo_wrap .sku_name');
let price = document.querySelector('.summary_price .price');

let list = document.querySelector('.list_item')


var big = document.querySelector('.preview_img .big');
// console.log(big);
var bigImg = big.firstElementChild;
// console.log(bigImg);

let id = window.sessionStorage.getItem('goodsId')-0;
// console.log(id);
getDetail()
async function getDetail(){
    let res = await pAjax({
        url : 'http://localhost:8888/goods/item',
        data : {id},
        dataType : 'json'
    })
    // console.log(res);
    img.src = res.info.img_big_logo;
    title.innerHTML = res.info.title;
    price.innerHTML = `￥${res.info.current_price}`;
    bigImg.src = res.info.img_big_logo;
    let li=list.children
      for(var i=0;i<=li.length;i++){
            li[i].firstElementChild.src = res.info.img_big_logo
            // console.log( li[i].firstElementChild);
      }
          
// console.log(list.childNodes);
// list.childNodes[1].firstElementChild.src = res.info.img_big_logo
}


// 放大镜
let preview = document.querySelector('.preview_img');
var small = preview.firstElementChild;
// console.log(small);
var mask = document.querySelector('.preview_img .mask');
// console.log(mask);

// 鼠标移入mask和big显示
small.onmouseenter = function(){
    mask.style.display = 'block';
    big.style.display = 'block';
}
// 鼠标移出mask和big隐藏
small.onmouseleave = function(){
    mask.style.display = 'none';
    big.style.display = 'none';
}
//让mask在small范围内活动
//small注册鼠标移动事件
  small.onmousemove = function(e){

      // 获取鼠标在文档的坐标
      var x = e.pageX;
      var y = e.pageY;
      // console.log(x,y);

      // 获取父元素左立上、左的坐标
      var offLeft = preview.offsetLeft;
      var offTop = preview.offsetTop;
      // console.log(offLeft,offTop);

      // 将文档坐标减去父元素坐标，就获取到mask的left和top的值
      var targetX = x - offLeft;
      var targetY = y - offTop;
      // console.log(targetX,targetY);

      // 将left和top值减去mask的一半宽高，鼠标就在mask正中间了
      targetX -= mask.offsetWidth/2;
      targetY -= mask.offsetHeight/2;
      

      // 计算出mask最大移动距离
        var maxX = small.offsetWidth - mask.offsetWidth //small的宽 - mask的宽
        var maxY = small.offsetHeight - mask.offsetHeight //small的宽 - mask的宽

      //   三元表达式判断
      targetX = targetX < 0 ? 0 : targetX;
      targetX = targetX > maxX ? maxX : targetX;
      targetY = targetY < 0 ? 0 : targetY;
      targetY = targetY > maxY ? maxY : targetY;

      // 将left和top的值赋给css
      mask.style.left = targetX + 'px';
      mask.style.top = targetY + 'px';
      
      // 计算小图和大图的移动比例
        var bigImgMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigImgMaxY = bigImg.offsetHeight - big.offsetHeight;
        var bigImgX = targetX / maxX * bigImgMaxX;
        var bigImgY = targetY/ maxY * bigImgMaxY;
        bigImg.style.left = -bigImgX + 'px';
        bigImg.style.top = -bigImgY + 'px';
      
  }



  console.log(list);
  list.addEventListener('click', e => {
      e = e || window.event
      let target = e.target || e.srcElement
      // 点击的不是img就停止代码执行
      if (target.nodeName !== 'IMG') return
    //   console.log(target);
    //   console.log(target.nodeName);

      // 循环删除每个节点上的类名
      for (let i = 0; i < list.children.length; i++) {
          list.children[i].classList.remove('current')
      }
      console.log(list.children);

      // 因为效果是在li上显示的，点击的是img，所以要返回他们的父节点
      target.parentNode.classList.add('current')
  })



//   添加购物车
let addOneCart = document.querySelector('.addCar')
addOneCart.addEventListener('click',()=>{
    addCart(id)
})

async function addCart(goodsId){
    let id = window.localStorage.getItem('id');
    let token = window.localStorage.getItem('token');
    if(!id || !token){
        if(window.confirm('您还未登陆，点击确定跳转登录页，点击取消留在当前页')){
            window.location.href = './login.html';
            return
        }
    }
    let res = await pAjax({
        url : 'http://localhost:8888/cart/add',
        method : 'post',
        data : {id,goodsId},
        dataType : 'json',
        headers : { authorization: token }
    })
    console.log(res);
    if(res.code !== 1){
        if(window.confirm('您还未登陆，点击确定跳转登录页，点击取消留在当前页')){
            window.location.href = './login.html';
            return
        }
    }
    var a = confirm("恭喜您添加成功,是否跳转购物车");
    if (a == true) window.location.href = './cart.html'
}